<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Shopping list</title>
	<style type="text/css">
p {
  color: yellow;
  font-family: "arial", sans-serif;
  font-size: 1.2em;
}
body {
  color: white;
  background-color: black;
}
#purchases {
  border: 1px solid white;
  background-color: #333;
  color: #ccc;
  padding: 1em;
}
#purchases li {
  font-weight: bold;
}

	</style>
  </head>
  <body>
    <h1>What to buy</h1>
    <p title="a gentle reminder">Don't forget to buy this stuff.</p>
	<p>This is just a test</p>
    <ul id="purchases">
      <li>A tin of beans</li>
      <li>Cheese</li>
      <li>Milk</li>
    </ul>
	<script type="text/JavaScript">
	var paras = document.getElementsByTagName("p");
	for (var i=0; i< paras.length; i++) {
	  var title_text = paras[i].getAttribute("title");
	  if (title_text != null) {
		alert(title_text);
	  }
	}
	</script>
  </body>
</html>